<template>
  <el-row class="home" :gutter="20">
    <el-col :span="8">
      <el-card shadow="hover">
        <div class="user">
          <img :src="userimg" alt />
          <div class="userinfo">
            <p class="name">Can</p>
            <p class="access">SuperMan</p>
          </div>
        </div>
        <div class="login-info">
          <p>
            上次登录时间：
            <span>2019-9-6</span>
          </p>
          <p>
            上次登录地点：
            <span>上海</span>
          </p>
        </div>
      </el-card>
      <el-card shadow="hover" style="height:522px;margin-top:10px">
        <el-table :data="TabData">
          <el-table-column
            show-overflow-tooltip
            v-for="(val, key) in tabelLabel"
            :key="key"
            :prop="key"
            :label="val"
          ></el-table-column>
        </el-table>
      </el-card>
    </el-col>
    <el-col :span="16">
      <div class="num">
        <el-card
          shadow="hover"
          v-for="item in countData"
          :key="item.name"
          :body-style="{ display: 'flex',padding:0}"
        >
          <i class="icon" :class="`el-icon-${item.icon}`" :style="{background:item.color}"></i>
          <div class="detail">
            <p class="num">${{item.value}}</p>
            <p class="txt">{{item.name}}</p>
          </div>
        </el-card>
      </div>
      <el-card shadow="hover">
        <echart class="chart" style="height:280px" :chartData="echartData.order"></echart>
      </el-card>
      <div class="graph">
        <el-card shadow="hover">
          <echart class="chart" :chartData="echartData.user" style="height:260px"></echart>
        </el-card>
        <el-card shadow="hover">
          <echart class="chart" :chartData="echartData.video" :isAxisChart="false" style="height:260px"></echart>
        </el-card>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import Echart from "../../components/Echart";
export default {
  components: {
    Echart
  },
  data() {
    return {
      userimg: require("../../assets/img/user.png"),
      countData: [
        {
          name: "今日支付订单1",
          value: 123,
          icon: "goods",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单2",
          value: 123,
          icon: "s-promotion",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单3",
          value: 123,
          icon: "s-release",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单4",
          value: 123,
          icon: "s-finance",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单5",
          value: 123,
          icon: "s-data",
          color: "#2ec7c9"
        },
        {
          name: "今日支付订单6",
          value: 123,
          icon: "s-shop",
          color: "#2ec7c9"
        }
      ],
      TabData: [],
      tabelLabel: {
        name: "课程",
        todayBuy: "今日购买",
        monthBuy: "本月购买",
        totalBuy: "总购买"
      },
      echartData: {
        order: {
          xData: [],
          series: []
        },
        user: {
          xData: [],
          series: []
        },
        video: {
          series: []
        }
      }
    };
  },
  methods: {
    getTabData() {
      this.$http.get("/home/getHomeData").then(res => {
        res = res.data;
        this.TabData = res.data.tableData;
        // console.log(res.data);
        //订单折线图
        const order = res.data.orderData;
        this.echartData.order.xData = order.date;
        //取出serie中的name部分键名
        let keyArray = Object.keys(order.data[0]);
        // console.log(keyArray);
        //循环添加数据
        keyArray.forEach(key => {
          this.echartData.order.series.push({
            name: key == "vue" ? "小程序" : key,
            data: order.data.map(item => item[key]),
            type: "line"
          });
        });

        //柱状图
        this.echartData.user.xData = res.data.userData.map(item => item.date);
        this.echartData.user.series.push({
          name: "新增用户",
          data: res.data.userData.map(item => item.new),
          type: "bar"
        });
        this.echartData.user.series.push({
          name: "活跃用户",
          data: res.data.userData.map(item => item.active),
          type: "bar",
          barGap: 0
        });

        //饼图
        this.echartData.video.series.push({
          data: res.data.videoData,
          type: "pie"
        });
      });
    }
  },
  created() {
    this.getTabData();
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/scss/home.scss";
</style>